@let builderConfig = builderConfig$ | async;
@if (screenService.isPlatformBrowser()) {
  <div class="code-editor-btns text-white flex justify-center">
    <app-btn
      (click)="onShowMore()"
      [class.lock]="isCollapse()"
      [content]="{
        color: undefined,
        mode: 'icon',
        icon: { svg: isMore() ? 'chevron-up' : 'chevron-down' },
        disabled: isCollapse(),
      }"
      matTooltip="{{ isMore() ? '展开' : '收起' }}"
      matTooltipPosition="above"
    ></app-btn>
    <app-btn
      class="set-bottom"
      (click)="toggleCollapse()"
      [content]="{
        color: undefined,
        mode: 'icon',
        icon: { svg: isCollapse() ? 'tray-arrow-up' : 'tray-arrow-down' },
      }"
      [matTooltip]="isCollapse() ? '恢复' : '置底'"
      matTooltipPosition="above"
    ></app-btn>
  </div>
  <div class="toolbar p-5 flex gap-2 items-center">
    <div class="text-white">{{ isAPI() ? '数据来源 API' : 'Tailwind 自定义组件' }}</div>
    @if (builderConfig?.codeEditor?.help) {
      <app-btn
        class="btn-help"
        [content]="{
          color: undefined,
          mode: 'icon',
          icon: { svg: 'tooltip-question-outline' },
        }"
        (click)="showHelp(builderConfig?.codeEditor?.help)"
        matTooltip="查看语法"
        matTooltipPosition="above"
      ></app-btn>
    }
  </div>
  <div
    class="code-editor grid grid-cols-12 gap-2"
    [class.collapse]="isCollapse()"
    [class]="isMore() ? 'more' : 'less'"
  >
    @if (isAPI()) {
      <div
        class="box col-span-12 {{
          isAPI() ? 'md:col-span-3' : ''
        }}  flex flex-col p-3 max-h-full overflow-auto"
      >
        <app-formly class="block" [form]="form" [fields]="fields" [model]="model" />
        <pre #jsonblock class="bg-white">
          <code [innerHTML]="highlightedCode()" class="language-json whitespace-normal break-words"></code>
        </pre>
      </div>
    }
    <div class="box col-span-12 {{ isAPI() ? 'md:col-span-9' : '' }}">
      <ngx-monaco-editor
        class="!h-full"
        [options]="MonacoOptions"
        [ngModel]="html()"
        [formControl]="htmlForm"
      />
    </div>
    @if (editing()) {
      <div class="editing absolute bottom-5 right-6">
        <app-loading [content]="{ size: 30 }" />
      </div>
    }
  </div>
}
